<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <div class="top-content">
        <el-row :gutter="40">
          <el-col class="mb40" :span="14">
            <div class="item-right" style="text-align: center; vertical-align: middle">
              <div class="echarts-title">库房出入库数据（进行中）</div>
              <div class="book-echarts">
                <Pie ref="pieRef" />
              </div>
            </div>
          </el-col>
          <el-col class="mb40" :span="10">
            <div class="item-right" style="text-align: center; vertical-align: middle">
              <div class="echarts-title">可分配库存数据</div>
              <div class="book-echarts">
                <curve ref="curveRef" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataVisualize">
import { ref, onMounted } from "vue";
import Pie from "./components/pie.vue";
import curve from "./components/curve.vue";
// import { getTaskStatistics } from "@/api/modules/substation";
// import { Substation } from "@/api/interface";
// import { useUserStore } from "@/stores/modules/user";

// const userStore = useUserStore();

const pieRef = ref();
const curveRef = ref();

interface CirculationTypeCount {
  [key: number]: number;
}

interface CirculationDetailCount {
  [key: number]: number;
}

onMounted(async () => {
  const sortedInventoryCount = ref({
    names: ["餐具套装", "洗发水", "电池", "护肤霜", "雨伞", "咖啡机", "运动鞋", "手表", "眼镜", "实木椅"],
    values: [800, 780, 650, 620, 600, 530, 480, 420, 400, 380]
  });
  const curveCourierData = ref(sortedInventoryCount);

  const circulationTypeCount: CirculationTypeCount = {
    0: 80,
    1: 100
  };

  const circulationDetailCount: CirculationDetailCount = {
    0: 80,
    1: 200,
    2: 150,
    3: 120,
    4: 80,
    5: 80
  };

  const pieData = ref({
    circulationType: [circulationTypeCount[0], circulationTypeCount[1]],
    circulationDetail: [
      circulationDetailCount[0],
      circulationDetailCount[1],
      circulationDetailCount[2],
      circulationDetailCount[3],
      circulationDetailCount[4],
      circulationDetailCount[5]
    ]
  });
  pieRef.value.initChart(pieData);
  curveRef.value.initChart(curveCourierData);
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
